<template>
  <div class="clothingList">
    <div class="backBox">
      <div class="leftBox" @click="onClickLeft">
        <van-icon name="arrow-left" class="backIcon" />
        <span>返回</span>
      </div>
      <div class="title">制衣单</div>
    </div>
    <div class="content">
      <div class="taskContainer">
        <div class="taskTitle">
          <span class="name">制衣单</span>
          <div class="rightBox">
            <div class="itemBox">
              <img src="../../assets/img/1.png" alt="">
              <span>产前</span>
            </div>
            <div class="itemBox">
              <img src="../../assets/img/3.png" alt="">
              <span>挂片</span>
            </div>
            <div class="itemBox">
              <img src="../../assets/img/2.png" alt="">
              <span>停止挂片</span>
            </div>
            <div class="itemBox">
              <img src="../../assets/img/4.png" alt="">
              <span>停止生产</span>
            </div>
          </div>
        </div>
        <div class="taskBox">
          <div class="taskItem" v-for="(item,index) in clothingList" :key="index">
            <div class="itemLeft">
              <div class="item">
                <span>生产单号</span>
                <span>{{item.moNo}}</span>
              </div>
              <div class="item">
                <span>款号</span>
                <span>{{item.styleNo}}</span>
              </div>
              <div class="item">
                <span>颜色</span>
                <span>{{item.color}}</span>
              </div>
              <div class="item">
                <span>尺码</span>
                <span>{{item.sizeName}}</span>
              </div>
              <div class="item">
                <span>目标产量</span>
                <span>{{item.destQty}}</span>
              </div>
              <div class="item">
                <van-button type="primary" color="#007DBC" class="reStart" @click="reLine(item,index)">上线</van-button>
              </div>
              <!-- <div class="item">
                <span>挂片比例</span>
                <span>50%</span>
              </div> -->
            </div>  
            <div class="itemRight">
              <van-image width="140" height="184" radius="5" :src="item.imagePath" alt="" />
            </div>
             <div class="rankBox" :class="{'one':item.status == -1,'two':item.status == 0,'three':item.status == 1,'four':item.status == 2}"></div>
            <span class="rankNo"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getClothingList,restartLine } from '@/api/loginApi'
import { Dialog,Toast } from 'vant'
export default {
  data() {
    return {
      clothingList:[]
    }
  },
  mounted(){
    this.fetchPlanList()
  },
  methods:{
    // 获取制衣单
    fetchPlanList(){
      getClothingList().then(res =>{
        this.clothingList = res.data
      })
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    reLine(v,index){
      Dialog.confirm({
        title: '提示',
        message: '确认要上线吗?',
        confirmButtonColor: '#1989fa',
      })
        .then(() => {
          let params = {
            matchID: v.matchID
          }
          restartLine(params).then(res =>{
            if(res.data.code == 0){
              this.clothingList.splice(index,1)
              Toast('操作成功')
            }
          })
        })
        .catch(() => {
          // on cancel
        });
    }
  }
}
</script>

<style lang="less" scoped>
  .clothingList{
    background: #E7F3F9;
    height: 100%;
    display: flex;
    flex-direction: column;
    .backBox{
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      position: relative;
      background: #fff;
      height: 70px;
      line-height: 70px;
      font-size: 24px;
      .leftBox{
        position: absolute;
        left: 20px;
        display: flex;
        align-items: center;
        .backIcon{
          margin-right: 4px;
          font-size: 26px;
        }
      }
      .title{
        display: flex;
        .rightBox{
          display: flex;
        }
      }
    }
    .content{
      flex: 1;
      overflow: scroll;
      display: flex;
      flex-direction: column;
      margin: 15px;
      .taskContainer{
        background: #fff;
        padding: 15px;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        .taskTitle{
          border-bottom: 1px solid #007DBC;
          padding-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name{
            color: #007DBC;
            font-size: 22px;
          }
          .rightBox{
            display: flex;
            .itemBox{
              display: flex;
              align-items: center;
              margin-right: 8px;
              img{
                margin-right: 10px;
                // width: 15px;
                // height: 15px;
              }
            }
          }
        }
        .taskBox{
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          overflow: scroll;
          .taskItem{
            width: 33%;
            display: flex;
            margin-top: 10px;
            position: relative;
            margin-bottom: 15px;
            .itemLeft{
              flex-shrink: 0;
              margin-right: 20px;
              .item{
                display: flex;
                font-size: 18px;
                line-height: 30px;
                max-width: 227px;
                span:first-child{
                  width: 85px;
                  text-align: right;
                  margin-right: 12px;
                }
                span:last-child{
                  color: #007DBC;
                }
                .reStart{
                  width: 100%;
                  .van-button__text{
                    color: #fff;
                    font-size: 19px;
                    text-align: center;
                  }
                }
              }
            }
            .rankBox{
              height: 73px;
              width: 25px;
              border: 0px solid transparent;
              border-top: 29px solid #fff;
              border-left: 11px solid transparent;
              position: absolute;
              right: 18px;
            }
            .one{
              border-top: 29px solid #007DBC;
            }
            .two{
              border-top: 29px solid #84daa1;
            }
            .three{
              border-top: 29px solid #f9a836;
            }
            .four{
              border-top: 29px solid #3ccee8;
            }
            .rankNo{
              position: absolute;
              color: #fff;
              right: 15px;
              top: 13px;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
</style>